import 'package:flutter/material.dart';

class MyAppBar extends StatelessWidget {
  MyAppBar({this.title});

  // Widget子类中的字段往往都会定义为"final"

  final Widget title;

  @override
  Widget build(BuildContext context) {
    return new Container(
      height: 56.0, // 单位是逻辑上的像素（并非真实的像素，类似于浏览器中的像素）
      padding: const EdgeInsets.symmetric(horizontal: 10.0),
      decoration: new BoxDecoration(color: Colors.blue[500]),
      // Row 是水平方向的线性布局（linear layout）
      child: new Row(
        //列表项的类型是 <Widget>
        children: <Widget>[
          new IconButton(
            icon: new Icon(Icons.menu),
            tooltip: 'Navigation menu',
            onPressed: null, // null 会禁用 button
          ),
          // Expanded expands its child to fill the available space.
          new Expanded(
            child: title,
          ),
          new IconButton(
            icon: new Icon(Icons.search),
            tooltip: 'Search',
            onPressed: null,
          ),
        ],
      ),
    );
  }
}

class MyScaffold extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    // Material 是UI呈现的“一张纸”
    return new Material(
      // Column is 垂直方向的线性布局.
      child: new Column(
        children: <Widget>[
          new MyAppBar(
            title: new Text(
              'Example title',
              style: Theme.of(context).primaryTextTheme.title,
            ),
          ),
          new Expanded(
            flex: 1,
            child: new Row(
              children: <Widget>[
                new Expanded(child: new Container(
                  decoration: new BoxDecoration(color: Colors.redAccent[100]),
                  child: new Text('你好'),
                )),
                new MyButton(),
                new CounterButton(),
                new RaisedButton(onPressed: (){
                    print('raise button clicked');
                  },
                  child: new Center(
                    child: new Text('raise'),
                  ),
                )
              ],
            )
          ),
          new Expanded(
            flex: 5,
            child: new Center(
              child: new Text('Hello, ssss!'),
            ),
          ),
        ],
      ),
    );
  }
}

class MyButton extends StatelessWidget{

  @override
  Widget build(BuildContext context) {
    return new GestureDetector(
      onTap: (){
        print('mybutton clicked');
      },
      child: new Container(
        height: 36.0,
        padding: const EdgeInsets.all(8.0),
        margin: const EdgeInsets.symmetric(horizontal: 8.0),
        decoration: new BoxDecoration(
          borderRadius: new BorderRadius.circular(5.0),
          color: Colors.lightBlue
        ),
        child: new Center(
          child: new Text('点我'),
        ),
      ),
    );
  }
}

class CounterButton extends StatefulWidget{

  @override
  State<StatefulWidget> createState() => new CounterState();
}

class CounterState extends State<CounterButton>{

  var _count = 0;

  @override
  Widget build(BuildContext context) {
    return new Row(children: <Widget>[
      new RaisedButton(onPressed: _increment,
        child: new Text(_count > 0 ? 'count:$_count' : "Increment")
      ),
    ],);
  }

  void _increment(){
    setState(() {
      _count++;
    });
  }
}